<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.float {
				margin: 10px 10px 0 0;
				float: left;
				border: 1px dotted #27d1ff;
			}
		</style>
	</head>
	<body>
		<form action="#" method="get" enctype="application/x-www-form-urlencoded">
			<fieldset>
				<legend>input 标签</legend>
				<div class="float">
					<h4>文本输入框</h4>

					<div>
						<!-- <label> 标签与 <input> 通过其各自的for属性和id属性正确相关联，屏幕阅读器等辅助工具才会起到良好的作用-->
						<label for="username">用户名：</label>
						<input id="username" type="text" />
					</div>
					<div>
						<label for="uname">
							<span>用户名：</span>
							<input id="uname" name="username" placeholder="username" autofocus readonly disabled multiple required autocomplete="on" size="15" maxlength="10">
							<abbr title="required（必填字段）">*</abbr>
						</label>
					</div>
				</div>

				<div class="float">
					<h4>密码输入框</h4>
					<input type="password" />
				</div>

				<div class="float">
					<h4>邮箱地址输入框</h4>
					<input type="email" />
				</div>

				<div class="float">
					<h4>电话号码输入框</h4>
					<input type="tel" />
				</div>

				<div class="float">
					<h4>数字输入框</h4>
					<input type="number" min="0" max="100" step="5" />
				</div>

				<div class="float">
					<h4>滑块</h4>
					<input type="range" min="-100" max="100" step="10" />
				</div>

				<div class="float">
					<h4>日期输入框</h4>
					<input type="date" />
				</div>

				<div class="float">
					<h4>日期时间输入框</h4>
					<input type="datetime" />
				</div>

				<div class="float">
					<h4>本地日期时间输入框</h4>
					<input type="datetime-local" />
				</div>

				<div class="float">
					<h4>时间输入框</h4>
					<input type="time" />
				</div>

				<div class="float">
					<h4>星期输入框</h4>
					<input type="week" />
				</div>

				<div class="float">
					<h4>月份输入框</h4>
					<input type="month" />
				</div>

				<div class="float">
					<h4>网址输入框</h4>
					<input type="url" />
				</div>

				<div class="float">
					<h4>文件选择框</h4>
					<input type="file" accept="image/*" multiple>
				</div>

				<div class="float">
					<h4>颜色选择框-拾色器</h4>
					<input type="color" />
				</div>

				<div class="float">
					<h4>搜索框</h4>
					<input type="search" />
				</div>

				<div class="float">
					<h4>单选框</h4>
					<input type="radio" checked />
				</div>

				<div class="float">
					<h4>多选框</h4>
					<input type="checkbox" checked />
				</div>

				<div class="float">
					<h4>隐藏域</h4>
					<input type="hidden" />
				</div>

				<div class="float">
					<h4>普通按钮</h4>
					<input type="button" value="按钮" />
				</div>

				<div class="float">
					<h4>图片按钮</h4>
					<input type="image" src="assets/img/img.jpg"/>
				</div>

				<div class="float">
					<h4>重置按钮</h4>
					<input type="reset" />
				</div>

				<div class="float">
					<h4>提交按钮</h4>
					<input type="submit" />
				</div>
			</fieldset>

			<fieldset>
				<legend>textarea 标签</legend>
				<h4>多行文本输入框</h4>
				<textarea></textarea>
			</fieldset>

			<fieldset>
				<legend>select 标签</legend>
				<h4>下拉选择框</h4>
				<select id="groups" name="groups" multiple>
					<optgroup label="水果">
						<option>香蕉</option>
						<option selected>苹果</option>
						<option>柠檬</option>
					</optgroup>
					<optgroup label="蔬菜">
						<option>韭菜</option>
						<option>西兰花</option>
						<option>土豆</option>
					</optgroup>
				</select>
			</fieldset>

			<fieldset>
				<legend>datalist 标签</legend>
				<h4>下拉输入框</h4>
				<label for="fruit">喜欢什么水果？</label>
				<input type="text" name="fruit" id="fruit" list="fruits">
				<datalist id="fruits">
					<option>Apple</option>
					<option>Banana</option>
					<option>Blackberry</option>
					<option>Blueberry</option>
					<option>Lemon</option>
					<option>Lychee</option>
					<option>Peach</option>
					<option>Pear</option>
				</datalist>
			</fieldset>

			<fieldset>
				<legend>progress 标签</legend>
				<h4>进度条</h4>
				<progress max="100" value="75">75/100</progress>
			</fieldset>

			<fieldset>
				<legend>meter 标签</legend>
				<h4>仪表</h4>
				<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
			</fieldset>
		</form>
	</body>
</html>
